.about-me-mask
  position fixed
  background-color rgba(255, 255, 255, 0.48)
  top 0
  right 0
  bottom 0
  left 0
  height 100%
  z-index 1000

  display none

  &.open
    display block

.about-me-wrap
  display flex
  flex-direction column
  justify-content center
  align-items center
  width 30rem
  margin 10rem auto
  padding gutter-size * 2 0
  box-sizing border-box
  background-color color-article-background
  border 1px solid lighten(color-grey, 50%)
  border-radius 6px
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.07)

  @media mq-mobile
    width auto
    margin 10rem 1rem

.about-me__header
  .avatar
    border-radius 50%
    outline 0
    overflow hidden
    box-shadow 0 6px 10px rgba(0, 0, 0, 0.07)

.socials
  margin-top 2rem

.social-item
  margin-bottom 1rem

  .label
    width 2rem
    height 2rem
    display inline-block
    margin 0 .5rem
    vertical-align middle
    img
      width 100%
      height 100%
